<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>镇长地图</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- 引入微信JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #app {
            width: 100vw;
            height: 100vh;
            font-size: 0.6rem;
            margin: 0;
            padding: 0;
            background-repeat: no-repeat;
            background-position: 0 0 / cover;
            background-color: #101129;
        }

        .el-dialog {
            width: 100% !important;
        }

        .el-dialog__header {
            padding: 20px 10px 10px !important;
        }

        .el-dialog__body {
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="app" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <div id="mainMap" style="height: 100%; width: 100%"></div>
        <el-dialog :title="title" :visible.sync="dialogTableVisible" v-loading="tabelloading" element-loading-text="加载中"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-table :data="zhenZhangData">
                <el-table-column property="name" label="镇名"></el-table-column>
                <el-table-column label="镇长" width="50">
                    <template slot-scope="scope">
                        <span>{{scope.row.ApprovedCount > 0 ? '有' :
                            '无'}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="预估收入" align="center">
                    <template slot-scope="scope">
                        <span>{{ showYuGu(scope.row)}}元 </span>
                    </template>
                </el-table-column>


                <el-table-column property="UserCount" label="申请人数" align="center"></el-table-column>

                <el-table-column property="UserCount" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" plain @click="shengqingzhenzhang(scope.row)"
                            size="mini">申请</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-button type="primary" style="position: fixed;left: 20px;top: 20px;" @click="backCity"
            v-if="level =='city' || level =='district' ">返回市级</el-button>
    </div>

    <script>
        new Vue({
            el: "#app", // 指定Vue实例控制的DOM元素
            data: {
                sign: true,
                back: '',
                baseUrl: 'https://dc.zygyx.com/',//基础路径
                baseUrl2: 'https://v2.zygyx.com/',
                provinceData: '',//省级数据
                provinceBackData: '',
                cityData: '',//市级数据
                cityBackData: '',
                districtData: '',//区县级数据
                title: "",
                level: '',
                bigDataList: [],
                dongtaijson: {},
                zhucetype: [],//用颜色区分注册的和未注册的
                loading: false,
                tabelloading: false,
                zhencode: "",
                dialogTableVisible: false,
                zhenZhangData: [],
                appid: '',//人人售电appid
                mobile: '',
                wxPagePath: 'https://dc.zygyx.com/miniapp/zhenzhangmap.html',
                wechatConfig: {},
                tipifi: [],
                quid: '',
                provinceId: '',
            },
            mounted() {
                const urlString = window.location.search;
                this.appid = this.getUrlParameter(urlString, 'appid');
                this.provinceId = this.getUrlParameter(urlString, 'provinceId');
                this.mobile = this.getUrlParameter(urlString, 'mobile');
                this.getShengJson();
                this.getqianzhenginfo()
                var that = this;
            },

            methods: {

                getUrlParameter(url, param) {
                    // 改进的正则表达式，能够处理没有值的参数以及参数可能多次出现的情况
                    const regex = new RegExp(`[?&]${param}(?:=([^&#]*))?`);
                    const results = regex.exec(url);
                    // 检查匹配结果
                    if (results === null) {
                        return null;
                    }
                    // 解码并返回匹配到的参数值
                    return decodeURIComponent(results[1].replace(/\+/g, ' ') || '');
                },
                // 去申请镇长（获取省市区镇id）
                shengqingzhenzhang(val) {
                    var that = this;
                    that.tipifi[2] = val.name
                    that.tabelloading = true;
                    $.get(
                        `${this.baseUrl}miniapp/Arera/GetZhenParents`,
                        { code: `${val.id}` },
                        function (response) {
                            // 请求成功时的回调函数(获取省市区的行政编码打开小程序)
                            that.tabelloading = false;
                            if (response.townId) {
                                that.navigateToMiniProgram(response)
                            }
                        }
                    ).fail(function (xhr, status, error) {
                        // 请求失败时的回调函数
                        that.tabelloading = false;
                        console.error(error);
                    });
                },


                // 获取签证信息
                getqianzhenginfo() {
                    var that_a = this
                    $.get(`${this.baseUrl}miniapp/app/GetWeChatConfig`, {
                        appId: that_a.appid,
                        url: that_a.wxPagePath
                    },
                        function (response) {
                            that_a.wechatConfig = { ...response }
                            if (response.appId) {
                                that_a.initWechatConfig()
                            }
                        }
                    ).fail(function (xhr, status, error) {
                        // 请求失败时的回调函数
                        that_a.loading = false;
                    });
                },
                initWechatConfig() {
                    console.log(this.wechatConfig, '获取签证信息');
                    // 假设从后端获取的签名数据通过props或其他方式传递进来
                    const { appId, timestamp, nonceStr, signature } = this.wechatConfig;
                    wx.config({
                        debug: false,
                        appId: appId,
                        timestamp: timestamp,
                        nonceStr: nonceStr,
                        signature: signature,
                        jsApiList: ["navigateToMiniProgram"]
                    });

                    wx.ready(() => {
                        console.log("微信JSSDK初始化成功");
                    });

                    wx.error((res) => {
                        console.error("微信JSSDK初始化失败", res);
                    });
                },
                //小程序内嵌H5跳转小程序和H5跳转小程序
                navigateToMiniProgram(ssq) {
                    // 这里使用微信JSSDK的API打开小程序
                    let d = { ...ssq }
                    d.mobile = this.mobile
                    d.shiquzhengStr = this.tipifi
                    try {
                        let ssqData = JSON.stringify(d)
                        wx.miniProgram.navigateTo({
                            appId: `${this.appid}`,
                            url: `/pagesSub/mine/userSetting?otherParsmas=${ssqData}`
                        });
                    } catch (err) {
                        console.error('跳转小程序出错:', err);
                    }
                },
                // 获某个市级地图数据
                getShengJson() {
                    var that = this
                    that.loading = true;
                    $.get(`${this.baseUrl}miniapp/home/GetGeoJson`, {
                        adcode: that.provinceId.toString().slice(0, 6)
                    },
                        function (response) {
                            // 请求成功时的回调函数(获取省市区的行政编码打开小程序)
                            that.loading = false;
                            that.cityData = JSON.parse(response.Data);
                            console.log(JSON.parse(response.Data), '获取全国数据');
                            that.getshi_zhengZhangShu(that.provinceId.toString().slice(0, 6), '', '', '')
                        }
                    ).fail(function (xhr, status, error) {
                        // 请求失败时的回调函数
                        that.loading = false;
                        console.error(error);
                    });
                },
                // 获取省镇长申请人数
                getsheng_zhengZhangShu(provincevalue, cityvalue, districtvalue, townvalue, mapData) {
                    var that = this
                    var result = ''
                    let params = {
                        province: provincevalue,
                        city: cityvalue,
                        district: districtvalue,
                        town: townvalue,
                    }
                    that.loading = true;
                    $.get(`${this.baseUrl}miniapp/Arera/TongJi`, {
                        ...params
                    },
                        function (response) {
                            that.dongtaijson.features.forEach(item1 => {
                                const item2 = response.find(item2 => item2.name == item1.properties.name);
                                if (item2) {
                                    Object.assign(item1, item2);
                                }
                            });
                            that.provinceBackData = that.dongtaijson
                            that.zhucetype = that.dongtaijson.features.map(items => {
                                let color = ''
                                if (items.shenqing_renshu == 0 && items.zhenzhang_renshu == 0) {
                                    color = '#5d5d66'
                                } else if (items.zhenzhang_renshu > 0) {
                                    color = '#c40'
                                } else if (items.zhenzhang_renshu <= 0) {
                                    color = '#101129'
                                }
                                return {
                                    name: `${items.name}`, //区块名称
                                    itemStyle: {
                                        normal: {
                                            areaColor: `${color}`

                                        }
                                    }
                                }
                            })
                            that.getEcharts()
                            that.loading = false;
                        }
                    ).fail(function (xhr, status, error) {
                        // 请求失败时的回调函数
                        that.loading = false;
                        console.error(error);
                    });
                },


                // 获取市所申请镇长人数
                getshi_zhengZhangShu(provincevalue, cityvalue, districtvalue, townvalue, mapData) {
                    var that = this
                    var result = ''
                    let params = {
                        province: provincevalue,
                        city: cityvalue,
                        district: districtvalue,
                        town: townvalue,
                    }
                    that.loading = true;
                    $.post(`${this.baseUrl}miniapp/Arera/TongJiCity`, {
                        ...params
                    },
                        function (response) {
                            that.cityData.features.forEach(item1 => {
                                const item2 = response.find(item2 => item2.name == item1.properties.name);
                                if (item2) {
                                    Object.assign(item1, item2);
                                }
                            });
                            that.dongtaijson = that.cityData
                            that.cityBackData = that.cityData
                            that.zhucetype = that.dongtaijson.features.map(items => {
                                let color = ''
                                if (items.shenqing_renshu == 0 && items.zhenzhang_renshu == 0) {
                                    color = '#5d5d66'
                                } else if (items.zhenzhang_renshu > 0) {
                                    color = '#c40'
                                } else if (items.zhenzhang_renshu <= 0) {
                                    color = '#101129'
                                }
                                return {
                                    name: `${items.name}`, //区块名称
                                    itemStyle: {
                                        normal: {
                                            areaColor: `${color}`

                                        }
                                    }
                                }
                            })
                            that.getEcharts()
                            that.loading = false;
                        }
                    ).fail(function (xhr, status, error) {
                        // 请求失败时的回调函数
                        that.loading = false;
                        console.error(error);
                    });
                },

                // 获取区所申请镇长人数
                getqu_zhengZhangShu(provincevalue, cityvalue, districtvalue, townvalue, mapData) {
                    var that = this
                    var result = ''
                    let params = {
                        province: provincevalue,
                        city: cityvalue,
                        district: districtvalue,
                        town: townvalue,
                    }
                    that.loading = true;
                    $.post(`${this.baseUrl}miniapp/Arera/TongJiQu`, {
                        ...params
                    },
                        function (response) {
                            that.districtData.features.forEach(item1 => {
                                const item2 = response.find(item2 => item2.name == item1.properties.name);
                                if (item2) {
                                    Object.assign(item1, item2);
                                }
                            });
                            that.dongtaijson = that.districtData
                            that.zhucetype = that.dongtaijson.features.map(items => {
                                let color = ''
                                if (items.shenqing_renshu == 0 && items.zhenzhang_renshu == 0) {
                                    color = '#5d5d66'
                                } else if (items.zhenzhang_renshu > 0) {
                                    color = '#c40'
                                } else if (items.zhenzhang_renshu <= 0) {
                                    color = '#101129'
                                }
                                return {
                                    name: `${items.name}`, //区块名称
                                    itemStyle: {
                                        normal: {
                                            areaColor: `${color}`

                                        }
                                    }
                                }
                            })
                            that.getEcharts()
                            that.loading = false;
                        }
                    ).fail(function (xhr, status, error) {
                        // 请求失败时的回调函数
                        console.error(error);
                    });
                    return result
                },
                // 返回到市级别
                backCity() {
                    this.back = 'backshi'
                    this.cityData = this.cityBackData
                    this.dongtaijson = this.cityBackData
                    this.zhucetype = this.cityBackData.features.map(items => {
                        let color = ''
                        if (items.shenqing_renshu == 0 && items.zhenzhang_renshu == 0) {
                            color = '#5d5d66'
                        } else if (items.zhenzhang_renshu > 0) {
                            color = '#c40'
                        } else if (items.zhenzhang_renshu <= 0) {
                            color = '#101129'
                        }
                        return {
                            name: `${items.name}`, //区块名称
                            itemStyle: {
                                normal: {
                                    areaColor: `${color}`

                                }
                            }
                        }
                    })
                    this.setMap(this.cityData, this.level)
                },

                // 重绘地图
                setMap(mapData, level) {
                    console.log("一次")
                    var that = this
                    var charEle = document.getElementById("mainMap");
                    var charEch = echarts.init(charEle);
                    // 注册或更新地图数据
                    echarts.registerMap("map", { geoJSON: mapData });
                    // 更新配置项中的数据系列
                    charEch.setOption({
                        // 更新series中的data为省份数据
                        series: [{
                            data: mapData.features.map(item => ({
                                name: item.properties.name,
                                code: item.properties.adcode,
                                id: item.properties.id,
                                info: { ...item }
                            }))
                        }],

                        tooltip: {
                            show: false,
                            trigger: 'item',
                            formatter: function (params) {
                                let { name, shenqing_renshu, zhenzhang_renshu } = params.data.info
                                let content = `
                              <div style="width:200px">
                              <p>名称：${name}</p>  
                              <p>镇长申请人数：${shenqing_renshu}</p>  
                              <p>镇长注册人数：${zhenzhang_renshu}</p>  

                              </div>
                                `
                                return `${content}`;
                            }
                        },
                        grid: {
                            left: "0px",
                            right: "80px",
                            top: "2px",
                            bottom: "2px",
                        },
                        geo: {
                            map: "map",
                            zoom: 3,
                            // 最小缩放
                            scaleLimit: {
                                min: 0.8,
                            },
                            label: {
                                color: "#fff",
                                show: true,
                                formatter: function (params) {

                                    let name = ''
                                    let sqrs = ''
                                    let zcrs = ''
                                    let levels = ''
                                    let dataOrgre = ''
                                    if (that.back == 'backsheng') {
                                        dataOrgre = that.provinceBackData
                                    } else if (that.back == 'backshi') {
                                        dataOrgre = that.cityBackData
                                    } else {
                                        dataOrgre = that.dongtaijson
                                    }
                                    dataOrgre.features.forEach((items, index) => {
                                        if (items.name && items.name == params.name) {
                                            name = items.name
                                            sqrs = items.shenqing_renshu
                                            zcrs = items.zhenzhang_renshu
                                            levels = items.properties.level
                                        }
                                    })
                                    if (sqrs == 0 && zcrs == 0) {
                                        return `
                  ${name} (无)
                    `
                                    } else {
                                        return `
                  ${name}
                      镇长人数:${zcrs}人
                      申请人数:${sqrs}人
                    `
                                    }

                                },
                            },
                            emphasis: {
                                label: {
                                    color: "#fff",
                                    show: true,
                                },
                                itemStyle: {
                                    areaColor: {
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#073684", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "#2B91B7", // 100% 处的颜色
                                            },
                                        ],
                                    },
                                },
                            },
                            roam: true,
                            itemStyle: {
                                areaColor: "rgba(0, 0, 0, 0)", // 设置为透明色
                                borderColor: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#00F6FF",
                                        },
                                        {
                                            offset: 1,
                                            color: "#87ADCB",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(10,76,139,1)",
                                shadowOffsetY: 0,
                                shadowBlur: 60,
                                borderWidth: 1,
                            },
                            regions: [
                                ...that.zhucetype

                            ],
                            // 添加立体效果
                            viewControl: {
                                distance: 100, // 地图视角的远近，默认为100
                                alpha: 30, // 地图视角绕 x 轴（左右旋转）的角度，默认为 30
                                beta: 0, // 地图视角绕 y 轴（上下旋转）的角度，默认为 0
                            },
                        },
                        series: [
                            {
                                name: "太仓地图",
                                type: "map",
                                map: "map", // 确保与地图的名称对应
                                geoIndex: 0, // 设置对应的 geoIndex
                                data: this.dongtaijson.features.map((item, index) => {
                                    return {
                                        name: item.properties.name,
                                        code: item.properties.adcode,
                                        info: { ...item },
                                        adcode: item.properties.adcode,
                                        level: item.properties.level
                                    };
                                }),

                            },
                        ],

                    });
                    this.getEcharts()

                },

                getEcharts() {

                    var that = this;
                    var charEle = document.getElementById("mainMap");
                    var charEch = echarts.init(charEle);
                    // 检查地图是否已经注册
                    if (!echarts.getMap("map")) {
                        echarts.registerMap("map", {
                            geoJSON: this.dongtaijson
                        });


                    }

                    var options = {
                        tooltip: {
                            show: false,
                            trigger: 'item',
                            // formatter: function (params) {
                            //   let {name,shenqing_renshu,zhenzhang_renshu} = params.data.info
                            //   let  content = `
                            //                 <div style="width:200px">
                            //                 <p>名称：${name}</p>  
                            //                 <p>镇长申请人数：${shenqing_renshu}</p>  
                            //                 <p>镇长注册人数：${zhenzhang_renshu}</p>  

                            //                 </div>
                            //                   `
                            //   return `${content}`;
                            // }
                        },
                        grid: {
                            left: "0px",
                            right: "80px",
                            top: "2px",
                            bottom: "2px",
                        },
                        geo: {
                            map: "map",
                            zoom: 3,
                            // 最小缩放
                            scaleLimit: {
                                min: 0.8,
                            },
                            label: {
                                color: "#fff",
                                show: true,
                                formatter: function (params) {
                                    let name = ''
                                    let sqrs = ''
                                    let zcrs = ''
                                    let levels = ''
                                    let dataOrgre = ''
                                    if (that.back == 'backsheng') {
                                        dataOrgre = that.provinceBackData
                                    } else if (that.back == 'backshi') {
                                        dataOrgre = that.cityBackData
                                    } else {
                                        dataOrgre = that.dongtaijson
                                    }
                                    dataOrgre.features.forEach((items, index) => {
                                        if (items.name && items.name == params.name) {
                                            name = items.name
                                            sqrs = items.shenqing_renshu
                                            zcrs = items.zhenzhang_renshu
                                            levels = items.properties.level
                                        }
                                    })
                                    if (sqrs == 0 && zcrs == 0) {
                                        return `
                  ${name} (无)
                    `
                                    } else {
                                        return `
                  ${name}
                      镇长人数:${zcrs}人
                      申请人数:${sqrs}人
                    `
                                    }

                                },
                            },
                            emphasis: {
                                label: {
                                    color: "#fff",
                                    show: true,
                                },
                                itemStyle: {
                                    areaColor: {
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#073684", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "#2B91B7", // 100% 处的颜色
                                            },
                                        ],
                                    },
                                },
                            },
                            roam: true,
                            itemStyle: {
                                areaColor: "rgba(0, 0, 0, 0)", // 设置为透明色
                                borderColor: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#00F6FF",
                                        },
                                        {
                                            offset: 1,
                                            color: "#87ADCB",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(10,76,139,1)",
                                shadowOffsetY: 0,
                                shadowBlur: 60,
                                borderWidth: 1,
                            },
                            regions: [
                                ...that.zhucetype

                            ],
                            // 添加立体效果
                            viewControl: {
                                distance: 100, // 地图视角的远近，默认为100
                                alpha: 30, // 地图视角绕 x 轴（左右旋转）的角度，默认为 30
                                beta: 0, // 地图视角绕 y 轴（上下旋转）的角度，默认为 0
                            },
                        },
                        series: [
                            {
                                name: "太仓地图",
                                type: "map",
                                map: "map", // 确保与地图的名称对应
                                geoIndex: 0, // 设置对应的 geoIndex
                                data: this.dongtaijson.features.map((item, index) => {
                                    return {
                                        name: item.properties.name,
                                        code: item.properties.adcode,
                                        info: { ...item },
                                        adcode: item.properties.adcode,
                                        id: item.properties.id,
                                        level: item.properties.level
                                    };
                                }),

                            },
                        ],
                    };
                    charEch.setOption(options);
                    if (this.sign) {
                        charEch.on("click", async function (params) {
                            that.back = ''
                            if (params.data.level == 'province') {
                                // that.tipifi[0] = params.data.name
                            }
                            if (params.data.level == 'city') {
                                that.tipifi[0] = params.data.name
                            }
                            if (params.data.level == 'district') {
                                that.tipifi[1] = params.data.name
                            }
                            if (params.data.code) {
                                that.Adcode = params.data.code;
                                that.quid = params.data.info.id
                                that.title = params.data.name;
                                that.level = params.data.info.properties.level
                            }
                            if (params.componentType === "series" && params.seriesType === "map") {
                                // 获取市区json数据
                                if (that.level != 'district') {
                                    that.loading = true;
                                    $.get(`${that.baseUrl}miniapp/home/GetGeoJson`, { adcode: that.Adcode },
                                        function (response) {
                                            that.loading = false;
                                            const data = JSON.parse(response.Data);
                                            if (that.level == 'province') {
                                                that.getshi_zhengZhangShu(params.data.adcode, '', '', '')

                                                that.cityData = data
                                            } else if (that.level == 'city') {
                                                that.getqu_zhengZhangShu('', params.data.adcode, '', '')
                                                that.districtData = data
                                            }
                                            charEch.clear();
                                            let mapData = data.features.map((item, index) => {
                                                return {
                                                    name: item.properties.name,
                                                    code: item.properties.adcode,
                                                    info: { ...item }
                                                };
                                            });
                                            // charEch.resize();
                                            echarts.registerMap("map", { geoJSON: data });
                                            // that.getEcharts();
                                            charEch.setOption(
                                                {
                                                    grid: {
                                                        left: "0px",
                                                        right: "80px",
                                                        top: "2px",
                                                        bottom: "2px",
                                                    },
                                                    geo: {
                                                        map: "map",
                                                        zoom: 1.2,
                                                        // 最小缩放
                                                        scaleLimit: {
                                                            min: 0.8,
                                                        },
                                                        label: {
                                                            color: "#fff",
                                                            show: true,
                                                        },
                                                        emphasis: {
                                                            label: {
                                                                color: "#fff",
                                                                show: true,
                                                                formatter: function (params) {
                                                                    // 自定义标签内容，这里直接返回地名，你也可以添加更多内容或逻辑
                                                                    let name = ''
                                                                    let sqrs = ''
                                                                    let zcrs = ''
                                                                    let levels = ''
                                                                    let dataOrgre = ''
                                                                    if (that.back == 'backsheng') {
                                                                        dataOrgre = that.provinceBackData
                                                                    } else if (that.back == 'backshi') {
                                                                        dataOrgre = that.cityBackData
                                                                    } else {
                                                                        dataOrgre = that.dongtaijson
                                                                    }
                                                                    dataOrgre.features.forEach((items, index) => {
                                                                        if (items.name && items.name == params.name) {
                                                                            name = items.name
                                                                            sqrs = items.shenqing_renshu
                                                                            zcrs = items.zhenzhang_renshu
                                                                            levels = items.properties.level
                                                                        }
                                                                    })
                                                                    if (sqrs == 0 && zcrs == 0) {
                                                                        return `
                                  ${name} (无)
                                        `
                                                                    } else {
                                                                        return `
                                ${name}
                                镇长人数:${zcrs}人
                                申请人数:${sqrs}人
                                        `
                                                                    }
                                                                },
                                                            },
                                                            itemStyle: {
                                                                areaColor: {
                                                                    x: 0,
                                                                    y: 0,
                                                                    x2: 0,
                                                                    y2: 1,
                                                                    colorStops: [
                                                                        {
                                                                            offset: 0,
                                                                            color: "#073684", // 0% 处的颜色
                                                                        },
                                                                        {
                                                                            offset: 1,
                                                                            color: "#2B91B7", // 100% 处的颜色
                                                                        },
                                                                    ],
                                                                },
                                                            },
                                                        },
                                                        roam: true,
                                                        itemStyle: {
                                                            areaColor: "rgba(0, 0, 0, 0)", // 设置为透明色
                                                            borderColor: new echarts.graphic.LinearGradient(
                                                                0,
                                                                0,
                                                                0,
                                                                1,
                                                                [
                                                                    {
                                                                        offset: 0,
                                                                        color: "#00F6FF",
                                                                    },
                                                                    {
                                                                        offset: 1,
                                                                        color: "#87ADCB",
                                                                    },
                                                                ],
                                                                false
                                                            ),
                                                            shadowColor: "rgba(10,76,139,1)",
                                                            shadowOffsetY: 0,
                                                            shadowBlur: 60,
                                                            borderWidth: 1,
                                                        },
                                                        tooltip: {
                                                            show: false,
                                                        },
                                                        // 添加立体效果
                                                        viewControl: {
                                                            distance: 100, // 地图视角的远近，默认为100
                                                            alpha: 30, // 地图视角绕 x 轴（左右旋转）的角度，默认为 30
                                                            beta: 0, // 地图视角绕 y 轴（上下旋转）的角度，默认为 0
                                                        },
                                                    },
                                                    series: [
                                                        {
                                                            name: "太仓地图",
                                                            type: "map",
                                                            map: "map", // 确保与地图的名称对应
                                                            geoIndex: 0, // 设置对应的 geoIndex
                                                            data: mapData,
                                                        },
                                                    ],
                                                },
                                                true
                                            );
                                        }
                                    ).fail(function (xhr, status, error) {
                                        // 请求失败时的回调函数
                                        that.loading = false;
                                        console.error(error);
                                    });
                                } else {
                                    // 获取区县下的所有镇的数据
                                    that.getTownList()
                                }


                            }
                        });
                    }
                    this.sign = false
                    return charEch;
                },
                // 获取区县下的所有镇的数据
                getTownList() {
                    var other = this
                    other.loading = true;
                    $.get(
                        `${this.baseUrl}miniapp/Arera/GetZhen`,
                        { code: `${other.Adcode}` },
                        function (response) {
                            // 请求成功时的回调函数
                            other.loading = false;
                            // other.zhenZhangData = response;
                            other.getYuGuMoney(response, other.quid)
                            // other.dialogTableVisible = true;
                        }
                    ).fail(function (xhr, status, error) {
                        // 请求失败时的回调函数
                        other.loading = false;
                        console.error(error);
                    });
                },
                // 获取预估收入
                getYuGuMoney(zhenData, quAdcode) {
                    let that = this
                    that.tabelloading = true;
                    let d = {
                        areaId: quAdcode
                    }
                    $.ajax({
                        url: `${that.baseUrl2}renren-api/statementimport/sumTownerPriceByArea?areaId=${quAdcode}`,
                        type: 'GET',
                        headers: {
                            'content-type': 'application/json',
                            'token': '',
                            'tenantCode': 1002
                        },
                        contentType: 'application/x-www-form-urlencoded', // 可选，确保发送的content-type与headers一致
                        processData: false, // 可选，防止jQuery尝试处理发送的数据
                        success: function (response) {
                            if (response.msg == 'success') {
                                that.zhenZhangData = response;
                                let arr1 = response.data
                                let arr2 = zhenData

                                const mapById = arr1.reduce((acc, cur) => {
                                    acc[cur.townId] = cur;
                                    return acc;
                                }, {});

                                arr2 = arr2.map(item => {
                                    const match = mapById[item.id];
                                    if (match) {
                                        return { ...item, ...match };
                                    }
                                    return item;
                                });
                                // alert(JSON.stringify(response.data))
                                // alert(JSON.stringify(arr2))
                                that.zhenZhangData = arr2;
                                // console.log(that.zhenZhangData,'that.zhenZhangData');

                                that.dialogTableVisible = true;

                            }
                            that.tabelloading = false;
                        },
                        error: function (error) {
                            console.log('Error:', error);
                            alert(JSON.stringify(error))
                            that.tabelloading = false;
                        }
                    });
                },
                // 处理预估收入显示问题
                showYuGu(obj) {
                    var infos = '0'
                    console.log(infos, 'infos')
                    const entries = Object.entries(obj);
                    const sixthEntry = entries[5]; // 第六个键值对
                    const seventhEntry = entries[6]; // 第七个键值对
                    const sixthValue = sixthEntry[1]; // 第六个属性值
                    const seventhValue = seventhEntry[1]; // 第七个属性值
                    if (sixthValue == seventhValue) {
                        infos = `${sixthValue}`
                        return infos
                    } else {
                        infos = `${sixthValue} ~ ${seventhValue}`
                        return infos
                    }

                }


            },
        });
    </script>
</body>

</html>